<template>
    <div style="border-left:1px solid #ddd">
        <div class="devOps" ref="devOps">
            <div style="display:flex;flex-direction:row;padding:5px;" v-if="filepath2">
                <div>选择文件</div>
                <select v-model="filepaths" style="flex:1;">
                    <option :value="filepath">{{filepath}}</option>
                    <option :value="filepath2">{{filepath2}}</option>
                    <option :value="filepath3">{{filepath3}}</option>
                </select>
            </div>
            <div style="display:flex;flex-direction:row;padding:5px;" v-if="listnames.length>0">
                <div>选择文件</div>
                <select v-model="filepaths" style="flex:1;">
                    <option :value="item" v-for="item in listnames">{{item}}</option>
                   
                </select>
            </div>
            <div style="width:100%;padding:10px;background:rgba(0,0,0,0.5);display:flex;flex-direction:row;">
                <div>
                    <el-button type="primary" @click="openJson" style="border-radius:0">界面json</el-button>
                    <el-dropdown>
                        <el-button type="primary"  style="border-radius:0">
                            {{views}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item @click.native="openSearch">编辑搜索框</el-dropdown-item>
                            <el-dropdown-item @click.native="openList">编辑列表</el-dropdown-item>
                            <el-dropdown-item @click.native="openTab">编辑选项卡</el-dropdown-item>
                            <el-dropdown-item @click.native="openSql">编辑sql</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-button type="primary" @click="resetDevOps"  style="border-radius:0">重置</el-button>
                </div>
                <div style="flex:1;text-align:right">
                    <div v-if="dialogVisible7_view">
                        <el-button type="success" @click="addList">新建简单模板</el-button>
                        <el-button type="success" @click="addList2">新建简单模板2</el-button>
                        <el-button type="success" @click="changeDevOps">确定</el-button>
                    </div>

                    <div v-if="dialogVisible10_view">
                        <el-button type="success" @click="addSearchRow">新增行</el-button>
                        <el-button type="success" @click="changeDevOps">确定</el-button>
                    </div>

                    <div v-if="dialogVisible12_view">
                        <el-button type="success" @click="addListRow">新增行</el-button>
                        <el-button type="success" @click="changeDevOps">确定</el-button>
                    </div>

                    <div v-if="dialogVisible13_view">
                        <el-button type="success" @click="addDevTab">新增行</el-button>
                        <el-button type="success" @click="changeDevOps">确定</el-button>
                    </div>

                    <div v-if="dialogVisible15_view">
                        <el-button type="success" @click="changeSql">确定</el-button>
                    </div>

                    <div v-if="dialogVisible11_view">
                        <el-button type="success" @click="submitForm">确定</el-button>
                        <el-button type="danger" @click="closeEdits">关 闭</el-button>
                    </div>
                    <div v-if="dialogVisible14_view">
                        <el-button type="primary" @click="addDevTabOne">新增行</el-button>
                        <el-button type="primary" @click="changeDevOps">确定</el-button>
                        <el-button type="danger" @click="closeEdits">关 闭</el-button>
                    </div>
                </div>
                

            </div>
            <div class="devContent">
                <template  v-if="dialogVisible7_view">
                    <div class="devContentChild" v-if="dialogVisible7_view">
                        <vue-json-editor
                        v-model="fileJson"
                        :showBtns="false"
                        :mode="'code'"
                        lang="zh"  
                        :expandedOnStart="false"  
                        style="width:100%;height:100%"
                        />
                    </div>
                </template>
                <template v-if="dialogVisible10_view">
                    <div  class="devContentChild"   v-if="dialogVisible10_view">
                        <div style="flex:1;overflow:hidden;display:flex;flex-direction:column" >
                            <t-table
                                
                                :table="devSearchTable"
                                :columns="devSearchColumns"
                                isRowSort
                                row-key="id"
                                :maxHeight="maxHeight"
                                @rowSort="searchRowSort"
                            />
                        </div>
                        
                        
                    </div>
                    
                  
                </template>


                <template v-if="dialogVisible11_view">
                    <div class="devContentChild" >
                        <t-module-form
                            
                            :formOpts="formOpts"
                            :widthSize="widthSize"

                            >
                            <template #footer>
                                <el-button type="primary" @click="submitForm">确定</el-button>
                                <el-button type="primary" @click="closeEdits">关 闭</el-button>
                            </template>
                        </t-module-form>
                    </div>
                </template>


                <template v-if="dialogVisible12_view">
                    <div  class="devContentChild"   v-if="dialogVisible12_view">
                        <div style="flex:1;overflow:hidden;display:flex;flex-direction:column" >
                            <t-table
                                
                                :table="devListTable"
                                :columns="devListColumns"
                                isRowSort
                                row-key="field"
                                :maxHeight="maxHeight"
                                @rowSort="listRowSort"
                            />
                        </div>
                        
                        
                    </div>
                    
                   
                </template>


                <template v-if="dialogVisible13_view">
                    <div  class="devContentChild"   v-if="dialogVisible13_view">
                        <div style="flex:1;overflow:hidden;display:flex;flex-direction:column" >
                            <t-table
                                
                                :table="devTabTable"
                                :columns="devTabColumns"
                                isRowSort
                                row-key="tabId"
                                :maxHeight="maxHeight"
                                @rowSort="tabRowSort"
                            />
                        </div>
                        
                        
                    </div>
                    
                 
                </template>


                <template v-if="dialogVisible14_view">
                    <div class="devContentChild" style="margin-bottom:20px" >
                        <div  style="padding:10px;background:#fff;margin:20px;box-sizing:border-box;border-radius:5px;border:1px solid #ddd;">
                            <t-form
                        
                            :ref-obj.sync="devTabFormOpts.ref"
                            :formOpts="devTabFormOpts"/>
                        </div>
                        <div  style="background:#fff;margin:20px;box-sizing:border-box;border-radius:5px;border:1px solid #ddd;">
                            <t-table
                                :table="devTabOneTable"
                                :columns="devTabOneColumns"
                                isRowSort
                                row-key="name"
                                @rowSort="tabOneRowSort"
                                
                            />
                        </div>
                        <div  style="padding:10px;background:#fff;margin:20px;box-sizing:border-box;border-radius:5px;border:1px solid #ddd;">
                            <t-form
                        
                            :ref-obj.sync="devTabOneFormOpts.ref"
                            :formOpts="devTabOneFormOpts"/>
                        </div>
                    </div>
                    
                </template>


                <template v-if="dialogVisible15_view">
                    <div class="devContentChild"   v-if="dialogVisible15_view">
                        <div style="overflow:auto">
                            <div class='sqlCode'>

                                <codemirror ref="mycode" v-model="sql.sql" :options="cmOptions" class="code">
                                    </codemirror>
                            </div>
                            <div style="margin:10px;padding:10px;border:1px solid #ddd;background:#fff;border-radius:5px;">
                                <t-form
                                :ref-obj.sync="devSqlFormOpts.ref"
                                :formOpts="devSqlFormOpts"/>
                            </div>
                        </div>
                        
                        
                    </div>
                    
                   
                </template>

            </div>
        </div>


        <el-dialog
        title="通用界面编辑界面"
        class="jsonDialog"
        :visible.sync="dialogVisible7"
        width="80%">
        
            <div style="height:75VH" v-if="dialogVisible7">
                <vue-json-editor
                v-model="fileJson"
                :showBtns="false"
                :mode="'code'"
                lang="zh"  
                :expandedOnStart="false"  
                style="width:100%;height:75VH"
                @json-change="onJsonChange"
                @json-save="onJsonSave"
                @has-error="onError"
                />
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addList">新建简单模板</el-button>
                <el-button type="primary" @click="addList2">新建简单模板2</el-button>
                <el-button type="primary" @click="dialogVisible7 = false">关 闭</el-button>
                <el-button type="primary" @click="changeDevOps">确定</el-button>
            </span>
        </el-dialog>


        <el-dialog
        title="编辑搜索框"
        class="jsonDialog"
        :visible.sync="dialogVisible10"
        width="90%">
        
            <div style="height:75VH"   v-if="dialogVisible10">
                <t-table
                    :table="devSearchTable"
                    :columns="devSearchColumns"
                    isRowSort
                    row-key="id"
                    @rowSort="searchRowSort"
                />
                
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSearchRow">新增行</el-button>
                <el-button type="primary" @click="changeDevOps">确定</el-button>
                <el-button type="primary" @click="closeSearch">关 闭</el-button>
            </span>
        </el-dialog>
        
        <el-dialog
        title="编辑搜索框"
        class="jsonDialogEdit"
        :visible.sync="dialogVisible11"
        width="90%">
        
            <div style="height:75VH" v-if="dialogVisible11">
                <t-module-form
                    
                    :formOpts="formOpts"
                    :widthSize="widthSize"
                    />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button type="primary" @click="dialogVisible11 = false">关 闭</el-button>
            </span>
            
        </el-dialog>
        <el-dialog
        title="编辑列表"
        class="jsonDialog"
        :visible.sync="dialogVisible12"
        width="90%">
        
            <div style="height:75VH;"   v-if="dialogVisible12">
                <t-table
                    :table="devListTable"
                    :columns="devListColumns"
                    isRowSort
                    row-key="field"
                    use-virtual 
                    @rowSort="listRowSort"
                />
                
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addListRow">新增行</el-button>
                <el-button type="primary" @click="changeDevOps">确定</el-button>
                <el-button type="primary" @click="closeList">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog
        title="编辑选项卡"
        class="jsonDialog"
        :visible.sync="dialogVisible13"
        width="90%">
        
            <div style="height:75VH;"   v-if="dialogVisible13">
                <t-table
                    :table="devTabTable"
                    :columns="devTabColumns"
                    isRowSort
                    row-key="tabId"
                    
                    @rowSort="tabRowSort"
                />
                
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDevTab">新增行</el-button>
                <el-button type="primary" @click="changeDevOps">确定</el-button>
                <el-button type="primary" @click="closeTab">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog
        title="编辑选项卡"
        class="jsonDialog"
        :visible.sync="dialogVisible14"
        width="90%">
        
            <div style="height:75VH;"   v-if="dialogVisible14">
                <t-form
                :ref-obj.sync="devTabFormOpts.ref"
                :formOpts="devTabFormOpts"/>
                
                <t-table
                    :table="devTabOneTable"
                    :columns="devTabOneColumns"
                    isRowSort
                    row-key="name"
                    @rowSort="tabRowSort"
                    isEditCell
                />
                
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDevTabOne">新增行</el-button>
                <el-button type="primary" @click="changeDevOps">确定</el-button>
                <el-button type="primary" @click="dialogVisible14 = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog
        title="编辑sql"
        class="jsonDialog"
        :visible.sync="dialogVisible15"
        width="90%">
        
            <div style="height:75VH;text-align:left"   v-if="dialogVisible15">
                <div class='sqlCode'>

                    <codemirror ref="mycode" v-model="sql.sql" :options="cmOptions" class="code">
                            </codemirror>
                </div>
                <div style="margin:10px;padding:10px;border:1px solid #ddd;">
                    <t-form
                    :ref-obj.sync="devSqlFormOpts.ref"
                    :formOpts="devSqlFormOpts"/>
                </div>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="changeSql">确定</el-button>
                <el-button type="primary" @click="closeSql">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Vue  from 'vue'
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

import vueJsonEditor from 'vue-json-editor'
import sqlFormatter from "sql-formatter";
  
export default { 
    name:"listDev",
    props:["company","filepath","isDevOps","filepath2","filepath3"],
    components: {
        codemirror,
        vueJsonEditor
    },
    data(){
        return{
            filepaths:"",
            views:"界面编辑",
            isDialog:false,
            dialogVisible6:false,
            dialogVisible7:false,
            dialogVisible10:false,
            dialogVisible11:false,
            dialogVisible12:false,
            dialogVisible13:false,
            dialogVisible14:false,
            dialogVisible15:false,
            
            dialogVisible7_view:true,
            dialogVisible10_view:false,
            dialogVisible11_view:false,
            dialogVisible12_view:false,
            dialogVisible13_view:false,
            dialogVisible14_view:false,
            dialogVisible15_view:false,
            listnames:[],
            sqlBak:{},
            fileJson:{},
            fileJsonCopy:{},
            templateJson:{},
            templateJson2:{},
            devSearch:[],
            devSearchBak:[],
            widthSize:1,
            devSearchTable:{
                firstColumn: { type: 'index', label: '序列',fixed:'left' },
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.searchEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.searchDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                    fixed: 'right', // 固定列表右边（left则固定在左边）
                    width: 120,
                    label: '操作'
                    }
            },
            devSearchColumns:[
                { prop: 'title', label: '名称', minWidth: '100' ,widthSize:2,editType:'input',comp:"el-input",fixed:'left',tooltip:"搜索框显示的名字"},
                { prop: 'id', label: 'id', minWidth: '100',widthSize:2 ,editType:'input',comp:"el-input",fixed:'left',tooltip:"前端页面ID,一般没有特殊要求，只要当前页面唯一即可；一般设置成跟字段一样。#特殊的id有：monthBar(月份条只有1到12月)；monthBar2(除了monthBar的内容外；还有个选择日期按钮)；monthBar3(除了monthBar的内容外；还有个今日按钮)；monthBar4(除了1到12月的月份条外，还有选择日期和今日按钮)；monthBar5(除了1到12月的月份条外;还有个全年按钮；点击全年按钮会调到年统计的通用界面文件名就是源文件名后面加一个年)；monthBar6(除了1到12月的月份条外;还有个全年按钮)"},
                { prop: 'type', label: '类型', minWidth: '100',widthSize:2,editType:'select-arr',list:'searchType',comp:"el-select" },
                { prop: 'field', label: '字段', minWidth: '100',widthSize:2 ,editType:'input',comp:"el-input",tooltip:'sql条件里的字段'},
                { prop: 'opr', label: '操作符', minWidth: '100' ,widthSize:2,editType:'select-arr',list:'opr',comp:"el-select"},
                { prop: 'vals', label: '默认值', minWidth: '100' ,widthSize:2,editType:'input',comp:"el-input"},
                { prop: 'sqlWhere', label: '特殊查询语句', minWidth: '100',widthSize:1,editType:'input',comp:"el-input",tooltip:"实例：(sz_ex50 like ? or sz_ex9 like ?) 这样后台不在取这里设置的字段查询，而是替换成特殊查询语句" },
                { prop: 'source', label: '下拉框源', minWidth: '100' ,widthSize:1,editType:'input',comp:"el-input",tooltip:"csnew数据库的 common_dropoption表的selectname值；下拉框的数据来源可以使用下拉框源/下拉框值/远程sql/本地sql/后台请求路径；只能选择一个"},
                { prop: 'maps', label: '下拉框文本值', minWidth: '100',widthSize:1,editType:'input' ,comp:"el-input",tooltip:"这里设置固定的下拉框文本；用#号隔开；比如男#女 ；下拉框就有两行，分别显示男和女；注意如果下拉框文本值不填，下拉框值有内容；则下拉框文本值内容跟下拉框值一致"},
                { prop: 'map_val', label: '下拉框值', minWidth: '100' ,widthSize:1,editType:'input',comp:"el-input",tooltip:"配合下拉框文本值，也是用#号隔开，代表select的value"},
                { prop: 'source_sql', label: '远程sql', minWidth: '100' ,widthSize:1,editType:'textarea',comp:"el-input",tooltip:"这个查询的是csnew数据库的内容"},
                { prop: 'valsql', label: '本地sql', minWidth: '100' ,widthSize:1,editType:'textarea',comp:"el-input",tooltip:"这里查询的是csbyg数据库"},
                { prop: 'postUrl', label: '后台请求路径', minWidth: '100',widthSize:1 ,editType:'input',comp:"el-input",tooltip:"自己写后台返回数据源，需要有optname,和optvalue字段返回"},
                { prop: 'exkey', label: 'exkey', minWidth: '100' ,widthSize:1,editType:'input',comp:"el-input",tooltip:"给下拉框，下拉树提供额外的配置，跟编辑界面的exkey使用一样；"}
            ],
            devSearchFieldList:{
                id:{
                    labelRender: () => {
                    return (
                        <div class="label_render">
                        <el-popover
                            placement="right"
                            width="500"
                            
                            trigger="hover">

                            <table style="border:1px solid #ddd;background:#efefef;padding:5px;border-radius:5px">
                                <tr><td>前端页面ID,一般没有特殊要求，只要当前页面唯一即可；一般设置成跟字段一样。</td></tr>
                                <tr><td>特殊的id有：</td></tr>
                                <tr ><td>1.monthBar(月份条只有1到12月)；</td></tr>
                                <tr ><td>2.monthBar2(除了monthBar的内容外；还有个选择日期按钮)；</td></tr>
                                <tr ><td>3.monthBar3(除了monthBar的内容外；还有个今日按钮)；</td></tr>
                                <tr ><td>4.monthBar4(除了1到12月的月份条外，还有选择日期和今日按钮)；</td></tr>
                                <tr ><td>5.monthBar5(除了1到12月的月份条外;还有个全年按钮；点击全年按钮会调到年统计的通用界面文件名就是源文件名后面加一个年)；</td> </tr>
                                <tr ><td>6.monthBar6(除了1到12月的月份条外;还有个全年按钮)</td> </tr>
                              
                               
                            </table>
                            <el-button style="border:0;padding:0" slot="reference">id<i style="font-size:18px" class="el-icon-warning-outline"></i></el-button>
                        </el-popover>
                        
                        </div>
                    )
                    },
                    value:"id",
                    type: "input", 
                    widthSize: 2, 
                    comp: "el-input",
                    arrLabel: 'label', arrKey: 'value' ,
                    placeholder: "名称"
                }
            },
            devListFieldList:{

            },
            devTab:[],
            devTabBak:[],
            devList:[],
            devListBak:[],
            devListTable:{
                firstColumn: { type: 'index', label: '序列', fixed: true },
                operator: [
                    
                    {
                        text: '编辑',
                        type: 'primary',
                        fun: this.listEdit
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        fun: this.listDel
                        
                    }
                    ],
                    // 操作列样式
                    operatorConfig: {
                    fixed:"right",
                    width: 120,
                    label: '操作'
                    }
            },
            devListColumns:[
                { prop: 'title', label: '列名', minWidth: '100',widthSize:2,editType:'input',comp:"el-input",fixed:true},
                { prop: 'field', label: '字段', minWidth: '100',widthSize:2,editType:'input',comp:"el-input" },
                { prop: 'width', label: '宽度', minWidth: '80' ,widthSize:2,editType:'input',comp:"el-input"},
                { prop: 'colors', label: '颜色', minWidth: '100' ,widthSize:2,editType:'input',comp:"el-input"},
                { prop: 'sort', label: '是否排序', minWidth: '60' ,widthSize:2,editType:'select-arr',list:'selects',comp:"el-select"},
                { prop: 'type', label: '类型', minWidth: '100' ,widthSize:2,editType:'select-arr',list:'listTypeOptions',comp:"el-select"},
                { prop: 'complexField', label: '复合字段', minWidth: '100' ,widthSize:2,editType:'input',comp:"el-input"},
                { prop: 'fieldSql', label: '字段sql', minWidth: '100' ,widthSize:1,editType:'textarea',comp:"el-input"},
                { prop: 'isTip', label: 'isTip', minWidth: '100',widthSize:2,editType:'input' ,comp:"el-input"},
                { prop: 'isShowAll', label: 'isShowAll', minWidth: '100' ,widthSize:2,editType:'select-arr',list:'selects',comp:"el-select"},
                { prop: 'isxj', label: '是否需要小计', minWidth: '60' ,widthSize:2,editType:'select-arr',list:'selects',comp:"el-select"},
                { prop: 'totalMsg', label: '合计文本', minWidth: '100' ,widthSize:2,editType:'input',comp:"el-input"},
                { prop: 'isCenter', label: '是否居中', minWidth: '60' ,widthSize:2,editType:'select-arr',list:'selects',comp:"el-select"},
                { prop: 'fixed', label: 'fixed', minWidth: '60' ,widthSize:2,editType:'select-arr',list:'fixeds',comp:"el-select"},
                { prop: 'exkey', label: 'exkey', minWidth: '100',widthSize:1,editType:'input' ,comp:"el-input"},
                { prop: 'detail', label: 'sql明细', minWidth: '300',parentProp:'sq',
                    render: (text, row, index) => {
                    
                    if(row.sql){
                        return (
                            <div>
                            {JSON.stringify(row.sql)}
                            </div>
                        )
                    } else
                        return "";
                    } },
                { prop: 'detail2', label: 'data明细', minWidth: '300',parentProp:'sq',
                    render: (text, row, index) => {
                    
                    if(row.data){
                        return (
                            <div>
                            {JSON.stringify(row.data)}
                            </div>
                        )
                    } else
                        return "";
                    } }
            ],
            devTabTable:{
                firstColumn: { type: 'index', label: '序列', fixed: true },
                operator: [
                    
                {
                    text: '编辑',
                    type: 'primary',
                    fun: this.tabEdit
                },
                {
                    text: '删除',
                    type: 'danger',
                    fun: this.tabDel
                    
                }
                ],
                // 操作列样式
                operatorConfig: {
                fixed: 'right', // 固定列表右边（left则固定在左边）
                width: 120,
                label: '操作'
                }
            },
            devTabColumns:[
                { prop: 'id', label: '页面元素id', minWidth: '100' },
                { prop: 'field', label: '表字段', minWidth: '100' },
                { prop: 'curVal', label: '默认值', minWidth: '100' },
                { prop: 'opr', label: '操作符', minWidth: '100' },
                { prop: 'detail', label: '明细', minWidth: '300',
                        render: (text, row, index) => {
                        
                        if(row.maps){
                            return (
                                <div>
                                {JSON.stringify(row.maps)}
                                </div>
                            )
                        } else
                            return "";
                        } }
            ],

            devTabOneTable:{
                firstColumn: { type: 'index', label: '序列', fixed: true },
                operator: [
                    
                
                {
                    text: '编辑',
                    type: 'primary',
                    fun: this.tabOneEdit
                    
                },
                {
                    text: '删除',
                    type: 'danger',
                    fun: this.tabOneDel
                    
                }
                ],
                // 操作列样式
                operatorConfig: {
                fixed: 'right', // 固定列表右边（left则固定在左边）
                width: 120,
                label: '操作'
                }
            },
            devTabOneColumns:[
                { prop: 'name', label: '名称', minWidth: '150',fixed:'left' },
                { prop: 'val', label: '值', minWidth: '150'},
                { prop: 'field', label: '表字段', minWidth: '200'},
                { prop: 'opr', label: '操作符', minWidth: '160' },
                { prop: 'listname', label: '文件路径', minWidth: '460' }
            ],
            devTabFormOpts:{
                labelPosition: 'right',
                labelWidth: '80px',
                ref: null,
                formData:{

                },
                fieldList: [
                    
                ]
            },
            devTabOneFormOpts:{
                labelPosition: 'right',
                labelWidth: '80px',
                ref: null,
                formData:{

                },
                fieldList: [
                    { label:"名称",value:"name",type: 'input', comp: 'el-input',widthSize:2},
                    { label:"值",value:"val",type: 'input', comp: 'el-input',widthSize:2},
                    { label:"表字段",value:"field",type: 'input', comp: 'el-input',widthSize:2},
                    { label:"操作符",value:"opr",type: 'input', comp: 'el-input',widthSize:2,type: 'select-arr', comp: 'el-select',list:"opr",arrLabel: 'label', arrKey: 'value'},
                    { label:"文件路径",value:"listname",type: 'input', comp: 'el-input',widthSize:1},
                ],
                listTypeInfo:{
                    opr:[{
                        value:"=",
                        label:"等于"
                    },{
                        value:">=",
                        label:"大于等于"
                    },{
                        value:"<=",
                        label:"小于等于"
                    },{
                        value:"like",
                        label:"包含"
                    },{
                        value:"in",
                        label:"in"
                    }]
                }
            },
            devSqlFormOpts:{
                labelPosition: 'right',
                labelWidth: '140px',
                ref: null,
                formData:{
                   
                },
                fieldList: [
                    { label:"排序",value:"orderBy",type: 'input', comp: 'el-input'},
                    { label:"是否树形结构",value:"isTree",type: 'select-arr', comp: 'el-select',list:"selects",arrLabel: 'label', arrKey: 'value' },
                    { label:"树形结构ID",value:"treeId",type: 'input', comp: 'el-input'},
                    { label:"树形结构父节点ID",value:"parentId",type: 'input', comp: 'el-input'},
                    { label:"是否不分页",value:"noPage",type: 'select-arr', comp: 'el-select',list:"selects",arrLabel: 'label', arrKey: 'value' },
                    { label:"部门字段",value:"departField",type: 'input', comp: 'el-input'},
                    { label:"人员字段",value:"userField",type: 'input', comp: 'el-input'}
                ],
                listTypeInfo:{
                    selects:[{
                        value:"Y",
                        label:"是"
                    },{
                        value:"N",
                        label:"否"
                    }]
                }
            },
            devSql:{},
            formOpts: {
                
                
            },
            
            listTypeInfo:{
                searchType:[{
                    value:"text",
                    label:"文本框"
                },{
                    value:"select",
                    label:"下拉框"
                },{
                    value:"date2",
                    label:"日期选择框"
                },{
                    value:"datetime",
                    label:"日期时间选择框"
                },{
                    label:"年份选择",
                    value:"year"
                },{
                    label:"月份选择",
                    value:"month"
                },{
                    value:"hidden",
                    label:"隐藏域"
                },{
                    value:"select_tree",
                    label:"下拉树"
                },{
                    value:"city_select",
                    label:"地址选择"
                },{
                    value:"search_tab",
                    label:"选项卡"
                },{
                    value:"number",
                    label:"数字"
                }],
                opr:[{
                    value:"=",
                    label:"等于"
                },{
                    value:">=",
                    label:"大于等于"
                },{
                    value:"<=",
                    label:"小于等于"
                },{
                    value:"like",
                    label:"包含"
                },{
                    value:"in",
                    label:"in"
                }],
                selects:[{
                    value:"Y",
                    label:"是"
                },{
                    value:"N",
                    label:"否"
                }],
                listTypeOptions:[{
                    value:"data",
                    label:"html"
                },{
                    value:"date",
                    label:"date"
                },{
                    value:"dateAll",
                    label:"dateAll"
                },{
                    value:"total",
                    label:"合计"
                },{
                    value:"totalNum",
                    label:"条数合计"
                },{
                    value:"name",
                    label:"姓名脱敏"
                },{
                    value:"code",
                    label:"身份证脱敏"
                },{
                    value:"link",
                    label:"链接"
                },{
                    value:"tel",
                    label:"电话"
                }],
                fixeds:[{
                    value:"left",
                    label:"靠左"
                },{
                    value:"right",
                    label:"靠右"
                }]
            },
            formType:"",
            editorObj:null,
            sqlCode:"",
            
            cmOptions: {
                tabSize: 4,
                styleActiveLine: true,
                lineNumbers: true,
                line: true,
                mode: 'text/x-mssql', // SQL SERVER
                smartIndent: true,
                indentUnit: 4,
                autoRefresh: true,
                theme: 'solarized light' //对应引入的主题
            },
            maxHeight:0,
            types:""
        }
    },
    activated (){
            
        if(sessionStorage.getItem("isDevOps")=="Y"&&this.filepath){
            
            this.loadfileJson();
        }else{
           
        }
    },
    created(){
       
        this.filepaths=this.filepath;
       
       /* if(sessionStorage.getItem("isDevOps")=="Y"&&this.filepath){
            
            this.loadfileJson();
        }*/
       
    },
    methods:{
        handleClick(name){
            alert(name)
        },
        openJson(){
            this.views="编辑界面"
            if(this.isDialog){
                this.dialogVisible7=true;
            }else{
                this.dialogVisible7_view=true;
                this.dialogVisible10_view=false;
                this.dialogVisible11_view=false;
                this.dialogVisible12_view=false;
                this.dialogVisible13_view=false;
                this.dialogVisible14_view=false;
                this.dialogVisible15_view=false;
            }
        },
        openSearch(){
            this.views="编辑搜索框";
            if(this.isDialog){
                this.dialogVisible10=true;
            }else{
                this.dialogVisible10_view=true;
                this.dialogVisible7_view=false;
                this.dialogVisible11_view=false;
                this.dialogVisible12_view=false;
                this.dialogVisible13_view=false;
                this.dialogVisible14_view=false;
                this.dialogVisible15_view=false;
            }
           
            this.devSearchBak=JSON.parse(JSON.stringify(this.devSearch))
            console.log(this.$refs.devOps,"devOps========")
            console.log(this.$refs.devOps.offsetHeight,"devOps========")
            this.maxHeight=this.$refs.devOps.offsetHeight-60
        },
        addSearchRow(){
                let row={}
                this.devSearchColumns.forEach(function(item,index){
                row[item.prop]="";
                })
                this.devSearch.push(row)
        },
        closeSearch(){
            if(JSON.stringify(this.devSearch)!=JSON.stringify(this.devSearchBak)){
                this.$confirm('该数据已被变更，是否确认关闭窗口?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.closeSearchD();
                    }).catch(() => {
                            
                });
            }else{
                this.closeSearchD();
            }
            
           
        },
        closeSearchD(){
            this.dialogVisible10 = false;
            this.dialogVisible10_view = false;
            this.devSearch=JSON.parse(JSON.stringify(this.devSearchBak))
            this.fileJson.search=this.devSearch;
            this.devSearchTable.data=this.devSearch;
            console.log(this.devSearch,"this.devSearch==============")
        },
        closeDialogs(){
            this.dialogVisible12_view=false;
            this.dialogVisible10_view=false;
            this.dialogVisible11_view=false;
            this.dialogVisible7_view=false;
            this.dialogVisible13_view=false;
            this.dialogVisible14_view=false;
            this.dialogVisible15_view=false;
        },
        searchEdit(val){
            this.formType="";
            let indexs=-1;
            this.devSearchTable.data.forEach((item,index)=>{
                if(JSON.stringify(val)==JSON.stringify(item)){
                    indexs=index;
                }
            })

            let fieldList=[];
            for(let i=0;i<this.devSearchColumns.length;i++){
                if(this.devSearchFieldList[this.devSearchColumns[i].prop]){
                    fieldList.push(this.devSearchFieldList[this.devSearchColumns[i].prop]);
                }else if(this.devSearchColumns[i].tooltip){
                    fieldList.push({
                        labelRender: () => {
                        return (
                            <div class="label_render">
                            <el-popover
                                placement="right"
                                width="260"
                                trigger="hover">
                                <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                                    {this.devSearchColumns[i].tooltip}
                                </div>
                                <el-button style="border:0;padding:0" slot="reference">{this.devSearchColumns[i].label}<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                            </el-popover>
                           
                            </div>
                        )
                        },
                        value:this.devSearchColumns[i].prop,
                        type: this.devSearchColumns[i].editType, 
                        widthSize: this.devSearchColumns[i].widthSize, 
                        list: this.devSearchColumns[i].list, 
                        comp: this.devSearchColumns[i].comp,
                        arrLabel: 'label', arrKey: 'value' ,
                        placeholder: this.devSearchColumns[i].label
                    });
                }else{
                    fieldList.push({
                        label:this.devSearchColumns[i].label,
                        value:this.devSearchColumns[i].prop,
                        type: this.devSearchColumns[i].editType, 
                        widthSize: this.devSearchColumns[i].widthSize, 
                        list: this.devSearchColumns[i].list, 
                        comp: this.devSearchColumns[i].comp,
                        arrLabel: 'label', arrKey: 'value' 
                    })
                }
                

                /*if(!val[this.devSearchColumns[i].prop]){
                    val[this.devSearchColumns[i].prop]="";
                }*/
            }
            //fieldList=this.devSearchFieldList;
            //this.devSearchTable.data[indexs]=val;
            //this.fileJson.search[indexs]=val;
            console.log(val,"val=======================")

            let searchForm={
                title:"搜索框编辑",
                name:"searchForm",
                ref:null,
                opts:{
                    
                    formData:val,
                    fieldList:fieldList,
                    listTypeInfo:this.listTypeInfo
                }
                
            }
            
            this.formOpts={}
            this.formOpts["searchForm"]=searchForm;
            console.log(this.formOpts,"formOpts=======================")
            //this.formOpts.formData=val;

            if(this.isDialog){
                this.dialogVisible11=true;
            }else{
                this.closeDialogs();
                this.dialogVisible11_view=true;
                this.types="dialogVisible11"
            }
            
        },
        searchDel(val){
            this.$confirm('确定要删除该行数据? '+JSON.stringify(val), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.devSearch,"devSearch=========")
                    let indexs=-1;
                    this.devSearch.forEach(function(item, index) {
                        if(JSON.stringify(item)==JSON.stringify(val)){
                            indexs=index;
                        }
                    });
                    if(indexs>=0){
                        this.devSearch.splice(indexs,1)
                    }
                    console.log(val,"seachdel==========")
                }).catch(() => {
                        
            });
            
        },
        searchRowSort(list){
            console.log(list,"list=============")
            this.devSearch=list;
            this.changeDevOps("N");
        },
        openList(){
            
           
            this.views="编辑列表";
            this.devListBak=JSON.parse(JSON.stringify(this.devList))
            if(this.isDialog){
                this.dialogVisible12=true;
            }else{
                this.dialogVisible12_view=true;
                this.dialogVisible10_view=false;
                this.dialogVisible11_view=false;
                this.dialogVisible7_view=false;
                this.dialogVisible13_view=false;
                this.dialogVisible14_view=false;
                this.dialogVisible15_view=false;
            }

            
            this.maxHeight=this.$refs.devOps.offsetHeight-60
        },
        closeList(){
            if(JSON.stringify(this.devList)!=JSON.stringify(this.devListBak)){
                this.$confirm('该数据已被变更，是否确认关闭窗口?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.closeListD();
                    }).catch(() => {
                            
                });
            }else{
                this.closeListD();
            }
        },
        closeListD(){
            this.dialogVisible12=false;
            this.dialogVisible12_view=false;
            this.devList=JSON.parse(JSON.stringify(this.devListBak))
            this.fileJson.list=this.devList;
            this.devListTable.data=this.fileJson.list
        },
        addListRow(){
            let row={}
            this.devListColumns.forEach(function(item,index){
                row[item.prop]="";
            })
            this.devList.push(row)
        },
        listEdit(val){
            this.editorObj=val;
            this.formType="list"
            let fieldList=[];
            let formData={}

            let sqlFieldList=[];
            let sqlFormData={}

            let dataFieldList=[];
            let dataFormData={}
            let dataFormData2={}
            let dataFormData3={}
            console.log(val,"vals=====")
            this.devListColumns.forEach((item,index)=>{
                if(!item.parentProp){
                    
                    if(this.devListFieldList[item.prop]){
                        fieldList.push(this.devListFieldList[item.prop]);
                    }else if(item.tooltip){
                        fieldList.push({
                            labelRender: () => {
                            return (
                                <div class="label_render">
                                <el-popover
                                    placement="right"
                                    width="260"
                                    trigger="hover">
                                    <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                                        {item.tooltip}
                                    </div>
                                    <el-button style="border:0;padding:0" slot="reference">{item.label}<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                                </el-popover>
                            
                                </div>
                            )
                            },
                            value:item.prop,
                            
                            type: item.editType, 
                            widthSize: item.widthSize, 
                            list: item.list, 
                            comp: item.comp,
                            arrLabel: 'label', arrKey: 'value' ,
                            placeholder: item.label
                        });
                    }else{
                        fieldList.push({
                            label:item.label,
                            value:item.prop,
                            
                            type: item.editType, 
                            widthSize: item.widthSize, 
                            list: item.list, 
                            comp: item.comp,
                            arrLabel: 'label', arrKey: 'value' 
                        })
                    }
                    
                    
                    formData[item.prop]=val[item.prop] ? val[item.prop]:"";
                    //formData[item.prop]="";
                }
                
                
            });
           
            sqlFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            sql语句
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">sql<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"sql",
                
                type: "textarea", 
                widthSize: 1, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "sql语句"
            });
            sqlFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            sql语句索引
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">sql语句索引<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"key",
                type: "input", 
                widthSize: 2, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "sql语句索引"
            });
            sqlFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            sql语句关联外键
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">sql语句关联外键<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"rel_key",
                type: "input", 
                widthSize: 2, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "sql语句关联外键"
            });
            sqlFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            不存在时默认值
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">不存在时默认值<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"defaultKey",
                type: "input", 
                widthSize: 2, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "不存在时默认值"
            });

            if(val["sql"]){
                sqlFormData["sql"]=val["sql"]["sql"] ? val["sql"]["sql"]:"";
                sqlFormData["key"]=val["sql"]["key"] ? val["sql"]["key"]:"";
                sqlFormData["rel_key"]=val["sql"]["rel_key"] ? val["sql"]["rel_key"]:"";
                sqlFormData["defaultKey"]=val["sql"]["defaultKey"] ? val["sql"]["defaultKey"]:"";
            }else{
                sqlFormData["sql"]="";
                sqlFormData["key"]="";
                sqlFormData["rel_key"]="";
                sqlFormData["defaultKey"]="";
            }
                
            dataFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            字段
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">字段<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"key",
                type: "input", 
                widthSize: 2, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "字段"
            });
            dataFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            操作符
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">操作符<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"opr",
                type: "select", 
                widthSize: 2, 
                comp: "el-select",
                arrLabel: 'label', arrKey: 'value' ,
                list:'opr',
                placeholder: "操作符"
            });
            dataFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            值
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">值<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"val",
                type: "input", 
                widthSize: 2, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "值"
            });
            dataFieldList.push({
                labelRender: () => {
                return (
                    <div class="label_render">
                    <el-popover
                        placement="right"
                        width="260"
                        trigger="hover">
                        <div style="background:#efefef;padding:5px;border:1px solid #ddd;border-radius:5px;">
                            html
                        </div>
                        <el-button style="border:0;padding:0" slot="reference">html<i  style="font-size:18px"  class="el-icon-warning-outline"></i></el-button>
                    </el-popover>
                
                    </div>
                )
                },
                value:"html",
                type: "textarea", 
                widthSize: 2, 
                comp: "el-input",
                arrLabel: 'label', arrKey: 'value' ,
                placeholder: "html"
            });
            if(val["data"]&&val["data"].length>0){
                dataFormData["key"]=val["data"][0]["key"] ? val["data"][0]["key"]:"";
                dataFormData["opr"]=val["data"][0]["opr"] ? val["data"][0]["opr"]:"";
                dataFormData["val"]=val["data"][0]["val"] ? val["data"][0]["val"]:"";
                dataFormData["html"]=val["data"][0]["html"] ? val["data"][0]["html"]:"";
            }else{
                dataFormData["key"]=""
                dataFormData["opr"]=""
                dataFormData["val"]=""
                dataFormData["html"]=""
            }
                
            if(val["data"]&&val["data"].length>1){
                dataFormData2["key"]=val["data"][1]["key"] ? val["data"][1]["key"]:"";
                dataFormData2["opr"]=val["data"][1]["opr"] ? val["data"][1]["opr"]:"";
                dataFormData2["val"]=val["data"][1]["val"] ? val["data"][1]["val"]:"";
                dataFormData2["html"]=val["data"][1]["html"] ? val["data"][1]["html"]:"";
            }else{
                dataFormData2["key"]=""
                dataFormData2["opr"]=""
                dataFormData2["val"]=""
                dataFormData2["html"]=""
            }
            if(val["data"]&&val["data"].length>2){
                dataFormData3["key"]=val["data"][2]["key"] ? val["data"][2]["key"]:"";
                dataFormData3["opr"]=val["data"][2]["opr"] ? val["data"][2]["opr"]:"";
                dataFormData3["val"]=val["data"][2]["val"] ? val["data"][2]["val"]:"";
                dataFormData3["html"]=val["data"][2]["html"] ? val["data"][2]["html"]:"";
            }else{
                dataFormData3["key"]=""
                dataFormData3["opr"]=""
                dataFormData3["val"]=""
                dataFormData3["html"]=""
            }

           
        
            let baseForm={
                title:"列表编辑",
                name:"listForm",
                ref:null,
                opts:{
                    formData:formData,
                    fieldList:fieldList,
                    listTypeInfo:this.listTypeInfo
                }
                
            }
            let sqlForm={
                title:"列表sql编辑",
                name:"sqlForm",
                ref:null,
                opts:{
                    formData:sqlFormData,
                    fieldList:sqlFieldList,
                    listTypeInfo:this.listTypeInfo
                }
                
            }

            
            
            
            let dataForm={
                title:"列表data编辑",
                name:"dataForm",
                ref:null,
                opts:{
                    formData:dataFormData,
                    fieldList:dataFieldList,
                    listTypeInfo:this.listTypeInfo
                }
                
            }
            let dataForm2={
                title:"列表data编辑2",
                name:"dataForm2",
                ref:null,
                opts:{
                    formData:dataFormData2,
                    fieldList:dataFieldList,
                    listTypeInfo:this.listTypeInfo
                }
                
            }
            let dataForm3={
                title:"列表data编辑3",
                name:"dataForm3",
                ref:null,
                opts:{
                    formData:dataFormData3,
                    fieldList:dataFieldList,
                    listTypeInfo:this.listTypeInfo
                }
                
            }
            // this.formOpts=this.listFormOpts
            let  formOpts={
                "listForm":baseForm,
                "sqlForm":sqlForm,
                "dataForm":dataForm,
                "dataForm2":dataForm2,
                "dataForm3":dataForm3
            }
            this.formOpts=formOpts;
                console.log(formOpts,"formOpts==============")
            if(this.isDialog){
                this.dialogVisible11=true;
            }else{
                this.closeDialogs();
                this.dialogVisible11_view=true;
                this.types="dialogVisible12"
            }
        },
        listDel(val){
            this.$confirm('确定要删除该行数据? '+JSON.stringify(val), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let indexs=-1;
                    this.devList.forEach(function(item, index) {
                        if(JSON.stringify(item)==JSON.stringify(val)){
                            indexs=index;
                        }
                    });
                    console.log("indexs============="+indexs)
                    if(indexs>=0){
                        this.devList.splice(indexs,1)
                    }
                }).catch(() => {
                        
            });
            
            
        },
        openTab(){
            this.views="编辑选项卡";
            if(this.isDialog){
                this.dialogVisible13=true;
            }else{
                this.dialogVisible13_view=true;
                this.dialogVisible10_view=false;
                this.dialogVisible11_view=false;
                this.dialogVisible12_view=false;
                this.dialogVisible7_view=false;
                this.dialogVisible14_view=false;
                this.dialogVisible15_view=false;
            }
            this.devTabBak=JSON.parse(JSON.stringify(this.devTab));
            this.maxHeight=this.$refs.devOps.offsetHeight-60
        },
        closeTab(){
            if(JSON.stringify(this.devTab)!=JSON.stringify(this.devTabBak)){
                this.$confirm('该数据已被变更，是否确认关闭窗口?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.closeTabD();
                    }).catch(() => {
                            
                });
            }else{
                this.closeTabD();
            }
        },
        closeTabD(){
            this.dialogVisible13=false
            this.dialogVisible13_view=false
            this.devTab=JSON.parse(JSON.stringify(this.devTabBak));
            this.fileJson.tab=this.devTab;
            this.devTabTable.data=this.fileJson.tab
        },
        tabEdit(val){
            let fieldList=[];
            for(let i=0;i<this.devTabColumns.length;i++){
                if(this.devTabColumns[i].prop!="detail"){
                    fieldList.push({
                        label:this.devTabColumns[i].label,
                        value:this.devTabColumns[i].prop,
                        type: 'input', 
                        comp: 'el-input'
                    })
                }   
                
            }
            console.log(val,"val==============================")
            this.devTabFormOpts.formData=val;
            this.devTabFormOpts.fieldList=fieldList;

            this.devTabOneTable.data=val.maps;
            if(this.isDialog){
                this.dialogVisible14=true;
            }else{
                this.closeDialogs();
                this.dialogVisible14_view=true;
                this.types="dialogVisible14"
            }
            
        },
        tabDel(val){
            this.$confirm('确定要删除该行数据? '+JSON.stringify(val), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let indexs=-1;
                    this.devTab.forEach(function(item, index) {
                        if(JSON.stringify(item)==JSON.stringify(val)){
                            indexs=index;
                        }
                    });
                    console.log("indexs============="+indexs)
                    if(indexs>=0){
                        this.devTab.splice(indexs,1)
                    }
                }).catch(() => {
                        
            });
            
        },
        tabOneEdit(val){
            this.devTabOneFormOpts.formData=val;
        },
        tabOneDel(val){
           console.log(this.devTabOneTable)
            this.$confirm('确定要删除该行数据? '+JSON.stringify(val), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let indexs=-1;
                    this.devTabOneTable.data.forEach(function(item, index) {
                        if(JSON.stringify(item)==JSON.stringify(val)){
                            indexs=index;
                        }
                    });
                    console.log("indexs============="+indexs)
                    if(indexs>=0){
                        this.devTabOneTable.data.splice(indexs,1)
                    }
                }).catch(() => {
                        
            });
        },
        addDevTab(){
            let row={}
                this.devTabColumns.forEach(function(item,index){
                if(item.prop!="detail")
                row[item.prop]="";
                })
                row.maps=[];
                this.devTab.push(row)
        },
        addDevTabOne(){
            let row={}
            this.devTabOneColumns.forEach(function(item,index){
                row[item.prop]="";
            })
            this.devTabOneTable.data.push(row)
        },
        listRowSort(list){
            console.log(list,"list=============")
            this.devList=list;
            this.fileJson.list=list;
            this.devListTable.data=this.fileJson.list
            this.changeDevOps("N");
        },
        tabRowSort(tab){
            this.devTab=tab;
            this.fileJson.tab=tab;
            this.devTabTable.data=this.fileJson.tab
            this.changeDevOps("N");
        },
        tabOneRowSort(tab){

        },
        submitForm(){
            if(this.formType=="list"){
                /* let devList=this.formOpts.listForm.opts.formData
                devList.sql=this.formOpts.sqlForm.opts.formData
                devList.data=this.formOpts.dataForm.opts.formData
                this.devList=devList;
                this.devListTable.data=devList;*/
                for(let key in this.formOpts.listForm.opts.formData){
                    this.editorObj[key]=this.formOpts.listForm.opts.formData[key]
                }
                this.editorObj.sql={};
                for(let key in this.formOpts.sqlForm.opts.formData){
                    this.editorObj.sql[key]=this.formOpts.sqlForm.opts.formData[key]
                }
                let data=[];
                let data1={}
                let data2={}
                let data3={}
                if(this.formOpts.dataForm.opts.formData.key){
                    for(let key in this.formOpts.dataForm.opts.formData){
                        data1[key]=this.formOpts.dataForm.opts.formData[key]
                    }
                    data.push(data1)
                }
                
                if(this.formOpts.dataForm2.opts.formData.key){
                    for(let key in this.formOpts.dataForm2.opts.formData){
                        data2[key]=this.formOpts.dataForm2.opts.formData[key]
                    }
                    data.push(data2)
                }
                if(this.formOpts.dataForm3.opts.formData.key){
                    for(let key in this.formOpts.dataForm3.opts.formData){
                        data3[key]=this.formOpts.dataForm3.opts.formData[key]
                    }
                    data.push(data3)
                }
                this.editorObj.data=data;
                console.log(this.devList,"devList===========")
            }
            this.changeDevOps();
            this.closeEdits();
        },
        closeEdits(){
            
            this.dialogVisible15_view=false;
            this.dialogVisible10_view=false;
            this.dialogVisible11_view=false;
            this.dialogVisible12_view=false;
            this.dialogVisible13_view=false;
            this.dialogVisible14_view=false;
            this.dialogVisible7_view=false;
            if(this.types=="dialogVisible11"){
                this.dialogVisible10_view=true;
            }else if(this.types=="dialogVisible14"){
                this.dialogVisible13_view=true;
            }else if(this.types=="dialogVisible12"){
                this.dialogVisible12_view=true;
            }
        },
        openSql(){
            this.views="编辑SQL";
            if(this.isDialog){
                this.dialogVisible15=true;
            }else{
                this.dialogVisible15_view=true;
                this.dialogVisible10_view=false;
                this.dialogVisible11_view=false;
                this.dialogVisible12_view=false;
                this.dialogVisible13_view=false;
                this.dialogVisible14_view=false;
                this.dialogVisible7_view=false;
            }
            this.sqlBak=JSON.parse(JSON.stringify(this.sql))
            this.sql.sql=sqlFormatter.format(this.sql.sql)
            console.log(this.sql,"this.sqls===================")
            this.devSqlFormOpts.formData=this.sql;
        },
        closeSql(){
            if(JSON.stringify(this.sql)!=JSON.stringify(this.sqlBak)){
                this.$confirm('该数据已被变更，是否确认关闭窗口?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.closeSqlD();
                    }).catch(() => {
                            
                });
            }else{
                this.closeSqlD();
            }
        },
        closeSqlD(){
            this.sql=JSON.parse(JSON.stringify(this.sqlBak))
            this.dialogVisible15=false;
            this.dialogVisible15_view=false;
        },
        changeSql(){
            
            this.changeDevOps()
            this.dialogVisible15=false;
           // this.dialogVisible15_view=false;
        },
        resetDevOps(){
            this.fileJson=JSON.parse(JSON.stringify(this.fileJsonCopy));
            this.devSearch=this.fileJson.search;
            this.devTab=this.fileJson.tab;
            this.devList=this.fileJson.list;
            this.sql=this.fileJson.sql;
            
            
            this.devSearchTable.data=this.fileJson.search;
            this.devListTable.data=this.fileJson.list
            this.devTabTable.data=this.fileJson.tab

            this.changeDevOps();
            this.openJson();
        },
        openDevOps(){
            
            this.dialogVisible7=true;
            
        },
        loadfileJson(){
            this.$post("api","/api/maintain/getJsonByRoot",{"path":"/"+this.company+"/list/"+this.filepaths+".json"}).then(data=>{
                if(data.search){
                    data.search.forEach((item2,index)=>{
                        this.devSearchColumns.forEach(item=>{
                            if(!item2[item.prop]){
                                item2[item.prop]="";
                            }
                        })
                    
                        //data.search[index]=item2;
                    })
                }
                if(data.list){
                    data.list.forEach((item2,index)=>{
                        this.devListColumns.forEach(item=>{
                            if(!item2[item.prop]){
                                item2[item.prop]="";
                            }
                        })
                    })
                }
                
                
                
                this.fileJson=data;
                this.devSearch=this.fileJson.search;
                if(!this.fileJson.tab){
                    this.fileJson.tab=[];
                }
                this.devTab=this.fileJson.tab;
                this.devList=this.fileJson.list;
                this.sql=this.fileJson.sql;
                this.fileJsonCopy=JSON.parse(JSON.stringify(data))
                
                
                this.devSearchTable.data=this.fileJson.search;
                this.devListTable.data=this.fileJson.list
                this.devTabTable.data=this.fileJson.tab

                let listnames="";
                let index_=this.filepath.indexOf("/");
                let systemname=this.filepath.substring(0,index_);
                if(this.fileJson.tab&&this.fileJson.tab.length>0){
                    this.fileJson.tab.forEach(item=>{
                        let maps=item.maps;
                        maps.forEach(item2=>{
                            console.log("listname====="+item2.listname)
                            if(item2.listname&&(","+listnames+",").indexOf(","+item2.listname+",")==-1){
                                this.listnames.push(systemname+"/"+item2.listname);
                                listnames=listnames=="" ? item2.listname:listnames+","+item2.listname;

                            }
                        })
                    })
                }
                console.log(this.devSearchTable,"this.devSearch==============")
                
                this.openJson();
                
            })
            this.$post("api","/api/maintain/getJsonByRoot",{"path":"/template/列表模板.json"}).then(data=>{
                this.templateJson=data;
                
            })
            this.$post("api","/api/maintain/getJsonByRoot",{"path":"/template/列表模板2.json"}).then(data=>{
                this.templateJson2=data;
                
            })
        },
        addList(){
            this.fileJson=this.templateJson
        },
        addList2(){
            this.fileJson=this.templateJson2
        },
        
        changeDevOps(isClose){
            if(this.sql&&this.sql.sql){
                this.sql.sql=this.sql.sql.replace(/[\r\n\s]/g, " ");
            }
           
            this.$post("api","/api/maintain/saveJson",{"isDevOps":"Y","path":"/"+this.company+"/list/"+this.filepaths+".json","json":JSON.stringify(this.fileJson)}).then(data=>{
                if(isClose!='N'){
                    this.dialogVisible7=false;
                    this.dialogVisible10=false;
                    this.dialogVisible11=false;
                    this.dialogVisible12=false;
                    this.dialogVisible13=false;
                }
                this.$emit("loadData","")
                if(this.sql&&this.sql.sql){
                    this.sql.sql=sqlFormatter.format(this.sql.sql)
                }
                
                this.$message({
                    message: '保存成功！',
                    type: 'success'
                });
                
            })
            
        },
        
        closeDialog(){
            this.dialogVisible11=false;
        },
    },
    watch:{
        filepaths(val){
            this.loadfileJson();
        }
    }
}
</script>
<style >
    .CodeMirror {
      overscroll-y: scroll !important;
      height: auto !important;
    }
    .jsoneditor-vue{
    height:100% !important;
    text-align:left;
}
.devContentChild .t_module_form{
    margin-bottom:0 !important;
}
.t-form{
    justify-content: space-between;
    align-content: space-between;
    margin-bottom:20px;

}
.t-form .el-form-item{
    margin-bottom:0;
}
.t_module_form .handle_wrap{
    width:48% !important;
    display:none !important;
}
.devContentChild .el-collapse-item__content{
    background:#ffff;
    padding:10px;
    border-radius:10px;
}
.devContentChild .el-collapse-item__wrap{
    background:#ddd !important;
}
.devContentChild .header_title{
    padding:0;
}
.devContentChild .t_form .el-collapse .el-collapse-item{
    margin-top:0;
}
.devContentChild .header_wrap{
    display:none !important;
}
.devContentChild .el-table__row:nth-child(odd){
    background-color: #f2f2f2;
}
.devContentChild .el-table__row:nth-child(even){

}
.devContentChild  .el-table .operator .operator_btn .el-button{
    margin-right:0 !important;
}
.devContentChild .el-collapse-item__header{
    height:35px;
}
.devContentChild .el-form-item__content{
    line-height:0;
}
.devContentChild .el-form-item__content{
    margin-bottom:5px;
}
.devContentChild textarea{
    min-height:100px !important;
}
.t_form .el-collapse .el-collapse-item .el-collapse-item__wrap{
    padding:8px !important;
}
/*
.devContentChild .t-table{
        flex:1;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    
} 
.devContentChild .el-table{
    flex:1;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.devContentChild .el-table__fixed{
    flex:1;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.devContentChild .el-table__body-wrapper{
    max-height: !important;
    flex:1;
}
.devContentChild .el-table__fixed-body-wrapper{
    max-height: !important;
    flex:1;
}*/
</style>
<style scoped>
.devOps{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}
.devContent{
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.devContentChild{
    flex:1;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.devContentFooter{
    text-align:center;
    background:rgba(0,0,0,0.5);
    padding-top:5px;
    padding-bottom:5px;
}
 .jsonDialog>>>.jsoneditor-vue{
    height:100% !important;
    text-align:left;
}

</style>